Project Details

Scope: Web Design, Web Development

Tools Used: Figma, Adobe Illustrator, HTML, CSS, JavaScript

Timeline: 1 Week

To add some dynamism to our HTML page, we can add some animations, especially on icons. Working with SVG, we enjoy good vrowser support for SVG animation, and we have more ways to create new animation without losing image quality. This is especially helpful when designers/developers are creating responsive websites that must look good and work well across a wide range of screen sizes and devices.

Link to a Live Server

Pattern Design

Unlike raster images, which delivers the final copy of an image, SVG images are completely editable by adjusting the codes using a text editor or special drawing tools. We can style or animate SVG images using class names or IDs of the SVG elements.

SVG Line Drawing

SVG supports the ability to change vector graphics over time, to create animated effects. stroke-dasharray is a SVG presentation attribute (which we can use as a CSS property) to make our SVG paths dashed instead of solid. we can also offset the stroke position with stroke-dashoffset. If we change this property it looks like our dashes are moving along the path.

SVG Stroke animation

A simple animation of the React logo with CSS and SVG here. I used the mousemove event which is fired at an element when a pointing device is moved while the cursor's hotspot is indside it.